<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/4/24
  Time: 17:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
<%--    <ol class="carousel-indicators">--%>
<%--        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>--%>
<%--        <li data-target="#myCarousel" data-slide-to="1"></li>--%>
<%--        <li data-target="#myCarousel" data-slide-to="2"></li>--%>
<%--    </ol>--%>

    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active" >
            <img src="/jkd/images/1.jpg" alt="First slide" style="height: 150px;width: 200px">
        </div>
        <div class="item">
            <img src="/jkd/images/2.jpg" alt="Second slide" style="height: 150px;width: 200px">
        </div>
        <div class="item">
            <img src="/jkd/images/3.jpg" alt="Third slide" style="height: 150px;width: 200px">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<!-- 控制按钮 -->
<script>
    $(function(){
        // 初始化轮播
        $("#myCarousel").carousel('cycle');
        // 循环轮播到上一个项目
        $(".prev-slide").click(function(){
            $("#myCarousel").carousel('prev');
        });
        // 循环轮播到下一个项目
        $(".next-slide").click(function(){
            $("#myCarousel").carousel('next');
        });
        // 循环轮播到某个特定的帧
        $(".slide-one").click(function(){
            $("#myCarousel").carousel(0);
        });
        $(".slide-two").click(function(){
            $("#myCarousel").carousel(1);
        });
        $(".slide-three").click(function(){
            $("#myCarousel").carousel(2);
        });
    });
</script>
